<template>
    <div class='root' @click='closeClick'>
        <div class="header">
            
        </div>
        <div class='container'>
            <div class='menu'>
                <ul>
                    <li>
                        <router-link to="/" class="clear-fix">
                            <span>首页</span>
                            <span class='fa fa-angle-right fa-2x'></span>
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/category" class="clear-fix">
                            <span>全部分类</span>
                            <span class='fa fa-angle-right  fa-2x'></span>
                        </router-link>
                    </li>
                    <li>
                        <router-link to="" class="clear-fix">
                            <span>推荐</span>
                            <span class='fa fa-angle-right fa-2x'></span>
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/user" class="clear-fix">
                            <span>个人中心</span>
                            <span class='fa fa-angle-right fa-2x'></span>
                        </router-link>
                    </li>
                </ul>
            </div>
            <div class='blank-box'></div>
        </div>
    </div>
</template>

<script>
    export default {
        methods:{
            closeClick:function(){
                this.$emit('close')
            }
        }
    }
</script>

<style scoped>
    .root{
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 1;
    }
    .header{
        height: 50px;
    }
    .container{
        display: flex;
    }
    .menu{
        background-color: #282828;
        height: calc(100vh - 50px); /*calc(x - y)符号两边要有空格*/
        flex-basis:70%;/*主轴方向所占空间*/
        flex-grow:1; /*放大比例*/
    }
    .blank-box{
        flex-basis:80px;
        flex-grow:0;
    }
    ul{
        list-style: none;
        font-size: 1.4rem;
        padding: 0; /*ul有自带的左内边距40px*/
        margin: 0; /*ul有自带的上下外边距16px*/
        border-top:solid 1px #3b3b3b;
    }
    li{
        padding: 10px;
        line-height: 32px;
        border-bottom:1px solid #3b3b3b;
    }
    a span:nth-of-type(1){
        float: left;
    }
    a span:nth-of-type(2){
        float: right;
    }
</style>